<template>
	<view class="daily-hot-deals">
		<!-- 顶部图片占位 -->
		<view class="top-image-placeholder">
			<image 
				class="banner-image" 
				src="/static/dailyHotDeals/top.png" 
				mode="widthFix"
				placeholder="请添加顶部图片"
			></image>
		</view>

		<!-- 产品网格区域 -->
		<view class="products-section">
			<view class="products-grid">
				<view 
					class="product-card" 
					v-for="(product, index) in products" 
					:key="index"
					:class="{ 'sold-out': product.isSoldOut }"
				>
					<view class="product-image">
						<image 
							class="product-img" 
							:src="product.imageSrc" 
							mode="aspectFill"
							placeholder="请添加产品图片"
						></image>
						<view v-if="product.isSoldOut" class="sold-out-stamp">
							<text class="stamp-text">已下架</text>
						</view>
					</view>
					<view class="product-info">
						<text class="product-title">{{ product.title }}</text>
						<text class="product-price">¥ {{ product.price }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				products: [
					{
						title: '时尚DC女装夏款短袖T恤女丝光棉纯棉V领T恤',
						price: '79.00',
						imageSrc: '/static/dailyHotDeals/img1.png',
						isSoldOut: false
					},
					{
						title: '渐变腮红自然裸色哑光腮红',
						price: '59.90',
						imageSrc: '/static/dailyHotDeals/img1.png',
						isSoldOut: true
					},
					{
						title: '独醒2023冬季新款香风长毛圆领大衣双排扣优雅小',
						price: '97.28',
						imageSrc: '/static/dailyHotDeals/img1.png',
						isSoldOut: true
					},
					{
						title: '2023新款小学生书包护脊2023新款小学生书包护脊',
						price: '1.00',
						imageSrc: '/static/dailyHotDeals/img1.png',
						isSoldOut: true
					}
				]
			};
		}
	}
</script>

<style lang="scss">
.daily-hot-deals {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.top-image-placeholder {
	width: 100%;
	background-color: #f0f0f0;
	
	.banner-image {
		width: 100%;
		height: 200px;
		background-color: #e0e0e0;
	}
}

.products-section {
	background-color: #fff;
	padding: 16px;
}

.products-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.product-card {
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

	&.sold-out {
		.product-image {
			position: relative;
		}
	}
}

.product-image {
	position: relative;
	width: 100%;
	height: 120px;
	background-color: #f0f0f0;
	overflow: hidden;

	.product-img {
		width: 100%;
		height: 100%;
		background-color: #e0e0e0;
	}
}

.sold-out-stamp {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

	.stamp-text {
		color: #999;
		font-size: 12px;
		font-weight: bold;
	}
}

.product-info {
	padding: 12px;

	.product-title {
		font-size: 13px;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 8px;
	}

	.product-price {
		font-size: 16px;
		color: #ff4757;
		font-weight: bold;
	}
}
</style>
